<script setup lang="ts">
import { ref } from 'vue'
import { NConfigProvider, NMessageProvider, NLayout, NLayoutHeader, NLayoutContent, NButton, NModal, NSpace, darkTheme, lightTheme } from 'naive-ui'
import HelloWorld from './components/HelloWorld.vue'
import { LoginSettings } from './modules/login'
import { useAuth } from './modules/login/useAuth'
import { LogViewer } from './modules/logs'

// 主题管理
const theme = ref(lightTheme)
const isDark = ref(false)

// 切换主题
function toggleTheme() {
  isDark.value = !isDark.value
  theme.value = isDark.value ? darkTheme : lightTheme
}

// 登录状态
const showLoginModal = ref(true)
const isLoggedIn = ref(false)
const rechargeUrl = 'https://env-00jxu65bfie3-static.normal.cloudstatic.cn/admin/index.html#/'
const loginSettingsRef = ref<{ resetForm: () => void } | null>(null)

// 日志查看器
const showLogViewer = ref(false)

// 获取认证方法
const { clearCredentials } = useAuth()

// 登录成功处理
const handleLoginSuccess = (): void => {
  isLoggedIn.value = true
  showLoginModal.value = false
}

// 登录日志处理
const handleLoginLog = (log: { message: string; type: string }): void => {
  console.log(`[${log.type}] ${log.message}`)
}

// 重新登录
const handleReLogin = async (): Promise<void> => {
  // 清除保存的登录凭据
  await clearCredentials()
  // 重置登录状态
  isLoggedIn.value = false
  // 显示登录弹窗
  showLoginModal.value = true
  // 重置登录表单（延迟执行，确保组件已渲染）
  setTimeout(() => {
    if (loginSettingsRef.value) {
      loginSettingsRef.value.resetForm()
    }
  }, 100)
}
</script>

<template>
  <n-config-provider :theme="theme">
    <n-message-provider>
      <n-layout class="h-full">
      <!-- 登录弹窗 -->
      <n-modal v-model:show="showLoginModal" preset="card" title="用户登录" :bordered="false" :closable="false"
        :mask-closable="false" :close-on-esc="false" :style="{ width: '500px', maxWidth: '90vw' }">
        <LoginSettings 
          ref="loginSettingsRef"
          :auto-login="true" 
          :recharge-url="rechargeUrl" 
          @login-success="handleLoginSuccess"
          @login-log="handleLoginLog" 
        />
      </n-modal>

      <!-- 主内容 -->
      <template v-if="isLoggedIn">
        <n-layout-header class="flex-between bg-[#1b2636] p-4">
          <img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png" class="h-12 w-auto" />
          <n-space :size="8">
            <n-button @click="toggleTheme" :type="isDark ? 'default' : 'primary'" size="small">
              {{ isDark ? '☀️ 浅色' : '🌙 深色' }}
            </n-button>
            <n-button @click="showLogViewer = true" type="info" size="small">
              查看日志
            </n-button>
            <n-button @click="handleReLogin" type="warning" size="small">
              重新登录
            </n-button>
          </n-space>
        </n-layout-header>
        <n-layout-content class="flex-center p-8 h-full">
          <HelloWorld />
        </n-layout-content>
      </template>

      <!-- 日志查看器弹窗 -->
      <n-modal v-model:show="showLogViewer" preset="card" title="日志查看器" :style="{ width: '90vw', maxWidth: '1200px' }">
        <LogViewer />
      </n-modal>
      </n-layout>
    </n-message-provider>
  </n-config-provider>
</template>

<style scoped>
#logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}
</style>
